🎯 8 Bài Tập DOM - Dễ đến Trung Bình

Thực hành DOM manipulation với mức độ phù hợp cho học sinh

📚 Hướng dẫn sử dụng:

1. Copy từng bài: Nhấn nút "📋 Copy Bài Này" → Paste vào file .html mới → Viết code trong function

2. Copy toàn bộ: Nhấn nút "📋 Copy HTML Template" → Lưu thành file .html → Có sẵn 8 bài để luyện

3. Demo: Nhấn "Demo" để xem kết quả mong đợi, nhấn "Thử nghiệm" để test code của bạn

📝 Bài 1: Thay Đổi Nội Dung Text

DỄ

📋 Yêu cầu: Viết hàm changeText()

  • Đầu vào: Không có tham số (lấy từ input)
  • Nhiệm vụ: Lấy giá trị từ input có id="newText1", thay đổi nội dung của element có id="text1"

Xin chào DevCamp!

🎨 Bài 2: Thay Đổi Style CSS

DỄ

📋 Yêu cầu: Viết 2 hàm changeColor() và changeSize()

1. changeColor():

  • Đầu vào: Không có
  • Nhiệm vụ: Lấy màu từ colorPicker, đổi màu nền styleBox
  • Gợi ý: .style.backgroundColor

2. changeSize():

  • Đầu vào: Không có
  • Nhiệm vụ: Toggle kích thước 100px ↔ 150px
  • Gợi ý: Dùng biến isLarge, .style.width/.height

👁️ Bài 3: Ẩn/Hiện Element

DỄ

📋 Yêu cầu: Viết hàm toggleVisibility()

  • Đầu vào: Không có tham số
  • Nhiệm vụ: Kiểm tra element toggleElement hiện tại ẩn hay hiện, sau đó đảo ngược trạng thái
  • Logic: Nếu display === 'none' → set 'block', ngược lại set 'none'
  • Gợi ý: Sử dụng .style.display, cấu trúc if/else
Element có thể ẩn/hiện 👻

🏷️ Bài 4: Thêm/Xóa Class CSS

DỄ

📋 Yêu cầu: Viết 2 hàm addClass() và removeClass()

1. addClass():

  • Đầu vào: Không có
  • Nhiệm vụ: Thêm class 'highlight' cho classElement
  • Gợi ý: .classList.add('highlight')

2. removeClass():

  • Đầu vào: Không có
  • Nhiệm vụ: Xóa class 'highlight' khỏi classElement
  • Gợi ý: .classList.remove('highlight')
Element với class động ✨

📋 Bài 5: Lấy Dữ Liệu Form

TRUNG BÌNH

Yêu cầu: Viết hàm getFormData() để lấy và hiển thị thông tin form

📝 Bài 6: To-Do List Động

TRUNG BÌNH

📋 Yêu cầu: Viết 2 hàm addTodo() và removeTodo()

1. addTodo():

  • Đầu vào: Không có
  • Nhiệm vụ:
    1. Lấy text từ todoInput
    2. Tạo div mới với class 'todo-item'
    3. Thêm nội dung + nút xóa
    4. Append vào todoList

2. removeTodo(button):

  • Đầu vào: button element
  • Nhiệm vụ: Xóa todo item chứa button đó
  • Gợi ý: button.parentElement.remove()

🖼️ Bài 7: Gallery Ảnh

TRUNG BÌNH

📋 Yêu cầu: Viết 3 hàm cho gallery ảnh

1. showImage(index, emoji, title):

  • Đầu vào: index (số), emoji (string), title (string)
  • Nhiệm vụ: Cập nhật currentImageIndex, thay đổi mainImage và imageTitle

2. nextImage():

  • Nhiệm vụ: Chuyển đến ảnh tiếp theo
  • Logic: currentImageIndex++, nếu vượt quá thì về 1

3. prevImage():

  • Nhiệm vụ: Chuyển đến ảnh trước
  • Logic: currentImageIndex--, nếu < 1 thì về max
🌅

Ảnh 1

🌅
🌄
🏖️
🌲

🔢 Bài 8: Máy Tính Đơn Giản

TRUNG BÌNH

📋 Yêu cầu: Viết 3 hàm cho máy tính

1. inputNumber(num):

  • Đầu vào: num (string hoặc number)
  • Nhiệm vụ: Thêm số vào calcString, cập nhật display
  • Gợi ý: calcString += num, kiểm tra nếu calcString là '0' thì thay thế

2. inputOperator(op):

  • Đầu vào: op (string: +, -, *, /)
  • Nhiệm vụ: Thêm phép tính, cập nhật display
  • Kiểm tra: Chỉ thêm nếu ký tự cuối không phải operator

3. calculate():

  • Đầu vào: Không có
  • Nhiệm vụ: Tính toán bằng eval(), hiển thị kết quả
  • Cảnh báo: Sử dụng try/catch để xử lý lỗi
0